import '../styles/front.css';
import '@nutui/nutui-react/dist/style.css';
import {Header} from '@blocklet/ui-react';
import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
import {getLocale, LocaleProvider, useLocaleContext} from '@arcblock/ux/lib/Locale/context';
import {useEffect, useState} from 'react';
import {createTheme, ThemeProvider} from "@arcblock/ux/lib/Theme";
import {ConfigProvider} from '@nutui/nutui-react';
import en from '@nutui/nutui-react/dist/locales/en-US';
import zh from '@nutui/nutui-react/dist/locales/zh-CN';
import {translations} from '../local';
const {SessionProvider} = createAuthServiceSessionContext()
const locals = {
    'en': en,
    'zh': zh,
};

function FrontLayout({children}) {
    const theme = createTheme()
    // const {t} = useLocaleContext();
    const [locale, setLocale] = useState(en);

    useEffect(() => {
        const key = getLocale();
        setLocale(locals[key]);
    }, []);


    return (
        <LocaleProvider translations={translations}>
            <ThemeProvider theme={theme} injectFirst={false}>
                <SessionProvider>
                    <ConfigProvider locale={locale}>
                        <div className="header">
                            <Header/>
                        </div>
                        <div className="front-container">
                            <div className="front-content">
                                {children}
                            </div>
                        </div>
                    </ConfigProvider>
                </SessionProvider>
            </ThemeProvider>
        </LocaleProvider>
    );
}

export default FrontLayout;
